<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法5：v-show和v-if条件渲染</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-if</h1>
            <h3>v-if v-else-if v-else 它们是连续的，中间不能有其它标签对</h3>
            <p>例子</p>
            <h4 v-if="order==0">我是第一排</h4>
            <h4 v-else-if="order==1">我是不上不下的第二排</h4>
            <h4 v-else>我是垫后的最后一排</h4>
            <button @click="order=++order%3">切换</button>
        <h1>知识点2：v-show</h1>
            <p>例子</p>
            <h4 v-show="visible">v-show的展示</h4>
            <h4 v-if="visible">v-if的展示</h4>
            <button @click="visible=!visible">显示/隐藏</button>
            <h4>v-show是通过添加样式来实现隐藏。v-if是通过删除标签对实现隐藏
                通常情况下，我们优先选择v-show来实现隐藏/显示
            </h4>
        <h1>课堂练习</h1>
            <h3>通过单选框的单击事件来实现不同用户的身份显示不同的页面</h3>
            <input type="radio" value="管理员" v-model='users'>管理员
            <input type="radio" value="教师" v-model='users'>教师
            <input type="radio" value="学生" v-model='users'>学生
            <br>
            <div v-show="users!=''">
                <div v-if="users=='管理员'">
                    {{users}},欢迎你！
                    <button>管理</button>
                </div>
                <div v-else-if="users=='教师'">
                    {{users}},欢迎你！
                    <button>上课</button>
                </div>
                <div v-else>
                    {{users}},欢迎你！
                    <button>学习</button>
                </div>
            </div>
        <h1>独立练习:选择登入方式</h1>
            <input type="radio" value="微信登入" v-model='entries'>微信登入
            <input type="radio" value="QQ登入" v-model='entries'>QQ登入
            <input type="radio" value="手机登入" v-model='entries'>手机登入
            <br>
            <div v-show="entries!=''">
                <div v-if="entries=='微信登入'">
                    <input type="text" value="微信号" v-model="singleText">微信号{{singleText}}
                    <br>
                    <input type="text" value="密码" v-model="passWord">密码
                    {{passWord}}
                    <br>
                    <button>登入</button>
                </div>
                <div v-else-if="entries=='QQ登入'">
                    <input type="text" value="QQ号" v-model="singleText">QQ号{{singleText}}
                    <br>
                    <input type="text" value="密码" v-model="passWord">密码
                    {{passWord}}
                    <br>
                    <button>登入</button>
                </div>
                <div v-else>
                    <input type="text" value="手机号" v-model="singleText">手机号{{singleText}}
                    <br>
                    <input type="text" value="密码" v-model="passWord">密码
                    {{passWord}}
                    <br>
                    <button>登入</button>
                </div>
            </div>

    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data(){
            return{
                order:0,
                visible:true,
                users:'',
                entries:'',
                singleText:'',
                passWord:''
            }
        },
    }).mount("#app")
</script>